<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<script type="text/javascript" src="../js/libs/jquery.js"></script>
<script type="text/javascript">
	jQuery.fn.extend({
			menu:function(conf){
				if(conf.style==undefined) conf.style='vertical';
				$(this).addClass('ct-menu').addClass('ct-menu-'+conf.style);
				label=$(this).find('label');
				subMenu=label.parent().find('ul');
				
				//subMenu.css({'position','absoulte'});
				subMenu.hide();
				subMenu.css({'list-style':'none','height':'0px'});
				label.mouseover(function(){
					subMenu.hide();
					$(this).parent().find('ul').show();	
				});			
			}
			});
	$(function(){
		$("#menu").menu({'style':'vertical'});
		
		
	});
	
</script>
</head>
<body>
<style type="text/css">
.ct-menu{
	
	
}
.ct-menu>ul>li>ul{
	/*padding-:0px;*/
	margin-top:-12px;
}
.ct-menu>ul>li>ul>li{
	
	
}
.ct-menu-vertical{
	
}
.ct-menu-horizontal{}
</style>
<body>
	<div id="menu">
		<ul>
			<li>
				<label>title</label>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>	
			</li>
			<li>
				<label>title</label>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>	
			</li>			
			<li>
				<label>title</label>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>	
			</li>
		</ul>
	</div>
	
</body>
</html>
